<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style: none}
       #tab{overflow: hidden;}
       #tab li{width: 100px;
       height: 30px;
       border: 1px solid black;
       list-style: none;
       float: left;
       text-align: center;}
       #pic li{
        width:406px;
        height: 400px;
        display: none;
        border: 1px solid black;
       }
       #tab .active{background: red}
       #pic .active{display: block;}
    </style>
</head>
<body>
    <div id="wrap">
        <ul id="tab">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id=pic>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script>
    var num=0
    var tab=document.getElementById("tab")
    var tablist=tab.getElementsByTagName("li")
    var pic=document.getElementById("pic")
    var piclist=pic.getElementsByTagName("li")
    for(let i=0;i<tablist.length;i++){
        tablist[i].onclick=function(){
            for(var j=0;j<tablist.length;j++){
                tablist[j].className=""
                piclist[j].className=""
            }
            tablist[i].className="active"
            piclist[i].className="active"
            num=i
        }
    }
    setInterval(fn,1000)
    function fn(){
        for(var i=0;i<piclist.length;i++){
            piclist[i].className=""
            tablist[i].className=""
        }
        piclist[num].className="active"
        tablist[num].className="active"
        num++
        if(num>=4){
            num=0
        }
    }
    </script>
</body>
</html>